<template>
  <view class="ask_main">
    <view class="ask_header">
      <view @click="goBack" class="arrow_left">
        <u-icon size="40rpx" name="arrow-left"></u-icon>
      </view>
      <u-tabs
        :list="navList"
        @click="clickMenu"
        :current="current"
        :scrollable="false"
        :activeStyle="activeStyle"
        :inactiveStyle="inactiveStyle"
        :itemStyle="{ height: '100rpx' }"
      >
      </u-tabs>
      <view class="ask_perch"> </view>
    </view>
    <scroll-view
      class="ask_scroll"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      refresher-background="#F6F7FB"
      @refresherrefresh="reload"
      @scrolltolower="loadMore"
    >
      <view v-if="askShow" class="ask_content">
        <template v-if="askList.length > 0">
          <view
            class="body_content"
            v-for="(item, index) in askList"
            :key="index"
            :class="modalName == 'move-box-' + index ? 'move-cur' : ''"
            @touchstart="ListTouchStart"
            @touchmove="ListTouchMove"
            @touchend="ListTouchEnd"
            :data-target="'move-box-' + index"
          >
            <view class="content_view" @click="goChatRoom(item)">
              <view class="content_top">
                <view class="content_top_left">
                  <u-avatar
                    :src="item.quiz_avatar"
                    :size="40"
                    mode="aspectFill"
                  ></u-avatar>
                  <text class="content_text">
                    {{ item.quiz_nickname }}
                  </text>
                  <text class="content_text">
                    {{ item.add_time_text }}
                  </text>
                </view>
                <view class="content_top_right">
                  <text v-if="item.status == 1" style="color: #50a7ff"
                    >待回答</text
                  >
                  <text v-if="item.status == 2" style="color: #2cc88d"
                    >正在沟通</text
                  >
                  <text v-if="item.status == 3" style="color: #fa5151"
                    >已结束</text
                  >
                </view>
              </view>
              <view class="content_middle">
                <text class="content_text"> 问： </text>
                <text class="content_main">
                  {{ item.title }}
                </text>
              </view>
              <view
                class="is_evaluate"
                v-if="item.is_evaluate == 0 && item.status == 3"
                @click.stop="showEvaluate(item)"
              >
                我要评价
              </view>
            </view>
            <view class="move">
              <view class="bg_red" @click="delQuiz(item)">删除</view>
            </view>
          </view>
          <uni-load-more :status="listStatus"></uni-load-more>
        </template>
        <template v-else>
          <view style="margin-top: 200rpx">
            <u-empty
              icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
            >
            </u-empty>
            <view class="ask_btn flex_center_align" @click="toQuickAsk"
              >去提问</view
            >
          </view>
        </template>
      </view>
      <view v-if="!askShow" class="body_view">
        <template v-if="answerList.length > 0">
          <view
            class="body_content"
            v-for="(item, index) in answerList"
            :key="index"
          >
            <view class="content_top" @click="goChatRoom(item)">
              <view class="content_top_left">
                <u-avatar
                  :src="item.avatar"
                  :size="30"
                  mode="aspectFill"
                ></u-avatar>
                <text class="content_text">
                  {{ item.name }}
                </text>
                <text class="content_text">
                  {{ item.time }}
                </text>
              </view>
              <view class="content_top_right">
                <text v-if="item.status == 2" style="color: #2cc88d"
                  >正在沟通</text
                >
                <text v-if="item.status == 3" class="fz24 c999">已完成</text>
              </view>
            </view>
            <view class="content_middle" @click="goChatRoom(item)">
              <text class="content_main">
                {{ item.content }}
              </text>
            </view>
            <view
              class="patch_btn"
              v-if="item.status == 3"
              @click="goAddAnswer(item)"
            >
              补充答案
            </view>
          </view>
          <uni-load-more :status="listStatus"></uni-load-more>
        </template>
        <template v-else>
          <view style="margin-top: 200rpx">
            <u-empty
              icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
            >
            </u-empty>
          </view>
        </template>
      </view>
    </scroll-view>
    <u-modal
      :show="delShow"
      title="提示"
      content="确认删除？"
      showCancelButton
      @cancel="delShow = false"
      @confirm="confirmDelLike"
    >
    </u-modal>

    <!-- 评价弹出层 -->
    <u-popup
      ref="evaluateShow"
      :show="evaluateShow"
      :round="15"
      closeable
      @close="evaluateShow = false"
      :closeOnClickOverlay="true"
    >
      <view class="evaluateShow">
        <text style="margin-bottom: 20rpx" class="fz30 c333 flex_center_align"
          >您的评价是老师进步的动力</text
        >
        <u-rate
          size="40"
          :count="count"
          v-model="starValue"
          active-color="#ffc847"
          inactive-color="#b2b2b2"
          gutter="20"
        >
        </u-rate>
        <view class="comment-box">
          <view class="comTxt1 c999 flex_center_align">{{
            showTitle(starValue)
          }}</view>
          <view class="items fz24 c999 flex" v-if="starValue == 1">
            <view
              class="item flex_center_align"
              :class="item.checked ? 'active' : ''"
              v-for="(item, index) in itemTxtList1"
              :key="index"
              @click.stop="chooseItem(item, index)"
            >
              {{ item.name }}
            </view>
          </view>
          <view class="items fz24 c999 flex" v-if="starValue == 2">
            <view
              class="item flex_center_align"
              :class="item.checked ? 'active' : ''"
              v-for="(item, index) in itemTxtList2"
              :key="index"
              @click.stop="chooseItem(item, index)"
            >
              {{ item.name }}
            </view>
          </view>
          <view class="items fz24 c999 flex" v-if="starValue == 3">
            <view
              class="item flex_center_align"
              :class="item.checked ? 'active' : ''"
              v-for="(item, index) in itemTxtList3"
              :key="index"
              @click.stop="chooseItem(item, index)"
            >
              {{ item.name }}
            </view>
          </view>
          <view class="items fz24 c999 flex" v-if="starValue == 4">
            <view
              class="item flex_center_align"
              :class="item.checked ? 'active' : ''"
              v-for="(item, index) in itemTxtList4"
              :key="index"
              @click.stop="chooseItem(item, index)"
            >
              {{ item.name }}
            </view>
          </view>
          <view class="items fz24 c999 flex" v-if="starValue == 5">
            <view
              class="item flex_center_align"
              :class="item.checked ? 'active' : ''"
              v-for="(item, index) in itemTxtList5"
              :key="index"
              @click.stop="chooseItem(item, index)"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
        <textarea
          auto-height="true"
          class="comment-input"
          v-model="inputTxt"
          placeholder="您的评价是对答主最好的鼓励"
        ></textarea>
        <view class="submit flex_center_align" @click.stop="evaluate"
          >提交评价</view
        >
      </view>
    </u-popup>
  </view>
</template>
<script
  type="text/javascript"
  src="plus-confusion://../quiz/myAsk/index"
></script>
<style lang="scss" scoped>
.ask_main {
  padding-top: var(--status-bar-height);
  height: 100%;
  background-color: #f6f6f6;
  overflow: hidden;
  position: relative;
}

.ask_scroll {
  height: calc(100vh - 200rpx);
  overflow: hidden;
}

.ask_header {
  display: flex;
  align-items: center;
  height: 100rpx;
  justify-content: space-between;
  background-color: #fff;
  position: relative;

  .arrow-img {
    width: 80rpx;
    height: 80rpx;
    padding: 20rpx;
  }

  .ask_perch {
    width: 50rpx;
  }
}

.ask_content {
  .body_content {
    margin-bottom: 6rpx;
    background-color: #fff;
    padding: 30rpx;
    transition: all 0.4s ease-in-out 0s;
    transform: translateX(0upx);
    display: flex;
    align-items: center;

    .content_view {
      flex: 1;

      .content_top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .content_top_left {
          display: flex;
          align-items: center;

          .content_text {
            margin-left: 15rpx;
            color: #999999;
            font-size: 24rpx;
          }
        }

        .content_top_right {
          font-size: 24rpx;
        }
      }

      .content_middle {
        display: flex;
        margin-top: 30rpx;

        .content_text {
          color: #50a7ff;
          font-size: 28rpx;
        }

        .content_main {
          flex: 1;
          color: #333333;
          font-size: 30rpx;
          font-weight: 400;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }

    .move {
      position: absolute;
      right: 0;
      display: flex;
      width: 130upx;
      height: 100%;
      transform: translateX(100%);

      .bg_red {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        background-color: #e54d42;
        color: #ffffff;
      }
    }
  }

  .move-cur {
    transform: translateX(-130upx);
  }
}

.body_view {
  .body_content {
    margin-bottom: 6rpx;
    background-color: #fff;
    padding: 30rpx;

    .content_top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .content_top_left {
        display: flex;
        align-items: center;

        .content_text {
          margin-left: 15rpx;
          color: #999999;
          font-size: 24rpx;
        }
      }

      .content_top_right {
        font-size: 24rpx;
      }
    }

    .content_middle {
      display: flex;
      margin-top: 30rpx;

      .content_text {
        color: #50a7ff;
        font-size: 28rpx;
      }

      .content_main {
        flex: 1;
        color: #333333;
        font-size: 32rpx;
        font-weight: 400;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }

    .patch_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 550rpx;
      width: 146rpx;
      height: 55rpx;
      font-size: 24rpx;
      background: #ffffff;
      border-radius: 50px;
      border: 1px solid #000000;
    }
  }
}

.arrow_left {
  padding-left: 30rpx;
}

::v-deep .u-modal__content {
  text-align: center;
}

.ask_btn {
  width: 196rpx;
  height: 68rpx;
  margin: auto;
  margin-top: 60rpx;
  background: #ffffff;
  border-radius: 4rpx;
  border: 2rpx solid #1c87f3;
  border-radius: 34rpx;
  color: #1c87f3;
}

.is_evaluate {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #444444;
  width: 146rpx;
  height: 55rpx;
  line-height: 55rpx;
  float: right;
  text-align: center;
  background: #ffffff;
  border-radius: 50rpx;
  border: 1rpx solid #000000;
}

.evaluateShow {
  padding: 100rpx 60rpx;

  .comment-box {
    width: 100%;

    .comTxt1 {
      margin: 40rpx auto;
    }

    .items {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .item {
        margin: 0 auto;
        margin: 10rpx;
        width: 181rpx;
        height: 53rpx;
        background: #ffffff;
        border-radius: 147px;
        border: 1px solid #dcdcdc;
      }

      .active {
        background: #1c87f3;
        color: #fff;
      }
    }
  }

  .comment-input {
    margin: 50rpx 0;
    padding: 30rpx;
    background-color: #f3f3f3;
    width: 100%;
    min-height: 120rpx;
    background: #f3f3f3;
    border-radius: 15px;
    font-size: 22rpx;
    color: #999;
  }

  .submit {
    width: 647rpx;
    height: 85rpx;
    background: #1c87f3;
    border-radius: 147rpx;
    color: #fff;
  }
}
</style>
